<template>
  <TopNavBar :title="_t18('28_about_title')" type="back" />

  <div class="about-us-container">
    <div class="about-us-header">
      <h1>{{ _t18('28_header_h1') }}</h1>
      <h2>{{ _t18('28_header_h2') }}</h2>
      <img
        class="about-us-banner"
        src="/static/img/YPo_8e2e261c_WYA.bf72d579.png"
        alt="banner"
      />
    </div>

    <div class="about-us-desc">
      <p>
        {{ _t18('28_desc_p1') }}<br />
        {{ _t18('28_desc_p2') }}<br />
        {{ _t18('28_desc_p3') }}
      </p>
    </div>

    <!-- 视频区 -->
    <video
      controls
      autoplay
      muted
      loop
      poster="/static/img/BAo_4a47a0db_st1.611453c5.png"
      class="video-player"
    >
      <source src="/mp4/jieshao.mp4" type="video/mp4" />
      {{ _t18('28_video_not_support') }}
    </video>

    <!-- 中间图标文字模块 -->
    <div class="icon-text-section">
      <div class="icon-text-item" v-for="item in iconTextList" :key="item.title">
        <img class="icon-text-icon" :src="item.icon" alt="icon" />
        <div class="icon-text-content">
          <h3>{{ _t18(item.title) }}</h3>
          <p>{{ _t18(item.desc) }}</p>
        </div>
      </div>
    </div>

    <div class="about-us-video">
      <div class="about-us-video-desc">
        <h3>{{ _t18('28_video_title') }}</h3>
        <p>{{ _t18('28_video_subtitle') }}</p>
      </div>
      <div class="about-us-image2">
        <img src="/static/img/BAo_4a47a0db_st1.611453c5.png" alt="about us 2" />
      </div>
    </div>

    <!-- 底部的图标文字模块 -->
    <div class="bottom-list">
      <div class="bottom-item" v-for="text in bottomList" :key="text">
        <img class="check-icon" src="/assets/defi/check.svg" alt="check" />
        <span class="bottom-text">{{ _t18(text) }}</span>
      </div>
    </div>
  </div>

  <!-- 全宽版权区 -->
  <div class="footer-copy">
    {{ _t18('28_footer_copy') }}
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { _t18 } from '@/utils/public.js'

const iconTextList = ref([
  {
    icon: '/assets/defi/privacy.svg',
    title: '28_privacy_title',
    desc: '28_privacy_desc'
  },
  {
    icon: '/assets/defi/safe.svg',
    title: '28_safe_title',
    desc: '28_safe_desc'
  },
  {
    icon: '/assets/defi/law.svg',
    title: '28_law_title',
    desc: '28_law_desc'
  },
  {
    icon: '/assets/defi/service.svg',
    title: '28_service_title',
    desc: '28_service_desc'
  }
])

const bottomList = ref([
  '28_bottom_1',
  '28_bottom_2',
  '28_bottom_3',
  '28_bottom_4',
  '28_bottom_5'
])
</script>

<style scoped>
.about-us-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px 64px 16px;
  background: #f4f6f8;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.about-us-header {
  text-align: center;
  margin-bottom: 32px;
}
.about-us-header h1 {
  font-size: 26px;
  font-weight: bold;
  color: #1a237e;
  margin-bottom: 8px;
}
.about-us-header h2 {
  font-size: 18px;
  color: #1976d2;
  margin-bottom: 16px;
}
.about-us-banner {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}
.about-us-desc {
  font-size: 16px;
  color: #333;
  margin-bottom: 32px;
  line-height: 1.8;
  text-align: justify;
}
.about-us-video {
  margin-bottom: 32px;
  text-align: center;
}
.video-player {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: 0 auto;
  min-height: 200px;
}
.about-us-video-desc {
  text-align: center;
  margin-top: 12px;
}
.about-us-video-desc h3 {
  font-size: 30px;
  color: #1976d2;
  margin-bottom: 14px;
  font-weight: 700;
}
.about-us-video-desc p {
  color: #555;
  font-size: 14px;
}
.about-us-image2 {
  text-align: center;
  margin-top: 24px;
}
.about-us-image2 img {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
}

/* 中间模块 */
.icon-text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 40px 0;
  gap: 24px;
}
.icon-text-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.icon-text-icon {
  width: 70px;
  height: 70px;
}
.icon-text-content h3 {
  margin: 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  text-align: center;
  width: 100%;
}
.icon-text-content p {
  margin: 4px 0 0;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

/* 底部文字列表 */
.bottom-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.bottom-item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 0;
}
.check-icon {
  width: 40px;
  height: 40px;
}
.bottom-text {
  font-size: 18px;
  color: #000;
  font-weight: 700;
}

/* 全宽版权信息 */
.footer-copy {
  width: 100%;
  background: #f4f6f8;
  text-align: center;
  padding: 14px 0;
  font-size: 13px;
  color: #777;
  border-top: 1px solid #e4e4e4;
  position: relative;
  bottom: 0;
  left: 0;
}
</style>
